<template>
    <div>
        <!-- sku介绍模块 -->
        <el-card class="box-card">
            <h4>创建(sku)介绍</h4>
            <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="90px"
                class="demo-ruleForm">
                <el-form-item label="商品名称" prop="title">
                    <el-input v-model="ruleForm.title" autocomplete="off" />
                </el-form-item>
                <el-form-item label="原始价格" prop="originalPrice">
                    <el-input v-model="ruleForm.originalPrice" placeholder="请输入原始价格"><template #append>元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="当前价格" prop="price">
                    <el-input v-model="ruleForm.price" placeholder="请输入当前价格"><template #append>元</template></el-input>
                </el-form-item>
                <el-form-item label="VIP价格" prop="vipPrice">
                    <el-input v-model="ruleForm.vipPrice" placeholder="请输入VIP价格"><template #append>元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="剩余库存">
                    <el-input disabled autocomplete="off" />
                </el-form-item>
                <el-form-item label="运费模板">
                    <el-cascader v-model="ruleForm.freightTemplateId" :options="freight" placeholder="请选择运费模板"
                        :props="freightProps" />
                </el-form-item>
                <el-form-item label="运费模板" prop="vipPrice">
                    <el-radio-group v-model="ruleForm.status">
                        <el-radio :label="1">在售</el-radio>
                        <el-radio :label="0">下架</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="商品图片" prop="imgList">
                    <el-upload v-model:file-list="ruleForm.imgList" action="/upload/admin" :headers="headers" list-type="picture-card"
                        :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
                        :before-upload="handerbeforeAvatarUpload">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </el-upload>
                    <el-dialog v-model="dialogVisiblede">
                        <img w-full :src="ruleForm.img" alt="Preview Image" />
                    </el-dialog>
                </el-form-item>
                <el-form-item label="商品单位" prop="stock">
                    <el-input v-model="ruleForm.unit" autocomplete="off" placeholder="件/个/盒" />
                </el-form-item>
                <el-form-item label="所属类目" prop="categoryId">
                    <el-cascader v-model="ruleForm.categoryId" :options="category" placeholder="请选择运费模板"
                        :props="categoryProps" />
                </el-form-item>
                <el-form-item label="商品简介" prop="description">
                    <el-input v-model="ruleForm.description" autocomplete="off" />
                </el-form-item>
                <el-form-item label="商品简介">
                    <TEditor v-model="ruleForm.detail"></TEditor>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 商品参数模块 -->
        <el-card class="box-card">
            <h4>商品参数</h4>
            <el-button type="primary" @click="handlerAddBtn(1, {})">添加</el-button>
            <div style="margin-top: 20px">
                <el-table :data="ruleForm.attributeList" border style="width: 100%">
                    <el-table-column prop="attribute" label="商品参数名称" align="center" />
                    <el-table-column prop="value" label="商品参数值" align="center" />
                    <el-table-column label="操作" align="center">
                        <template v-slot="{ row }">
                            <el-button type="danger" @click="ruleForm.attributeList.splice(row.$index, 1)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>

        <!-- 规格维度模块 -->
        <el-card class="box-card">
            <h4>规格维度</h4>
            <el-button type="primary" @click="handlerAddBtn(2, {})">添加</el-button>
            <div style="margin-top: 20px">
                <el-table :data="ruleForm.specificationList" border style="width: 100%">
                    <el-table-column label="维度ID" align="center" />
                    <el-table-column prop="title" label="维度名称" align="center" />
                    <el-table-column label="创建时间" align="center">
                        <template v-slot="{ row }">
                            {{ new Date(row.gmtCreate).concessionalRate() }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template v-slot="{ row }">
                            <el-button type="primary" @click="handlerAddBtn(4, row)">修改</el-button>
                            <el-button type="danger" @click="ruleForm.specificationList.splice(row.$index, 1)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>

        <!-- 商品sku详情模块 -->
        <el-card class="box-card">
            <h4>商品(sku)详情</h4>
            <el-button type="primary" @click="handlerAddBtn(3, {})">批量定价</el-button>
            <div v-for="(item, index) in ruleForm.specificationList" :key="index" style="margin: 10px 0">
                <el-tag class="mx-1" type="warning" :disable-transitions="false">
                    {{ item.title }}
                </el-tag>
                <el-tag v-for="(value, index2) in item.values" class="mx-1" closable :disable-transitions="false"
                    @close="handlerClose(item, value)" :key="index2">
                    {{ value }}
                </el-tag>
                <el-input v-if="item.inputVisible" ref="InputRef" v-model="item.inputValue" class="ml-1 w-20"
                    @keyup.enter="handleInputConfirm(item)" @blur="handleInputConfirm(item)" />
                <el-button v-else class="button-new-tag ml-1" @click="handlerShowInput(item)">
                    + 添加
                </el-button>
            </div>
            <div style="margin-top: 20px">
                <el-table :span-method="objectSpanMethod" :data="ruleForm.skuList" border style="width: 100%">
                    <el-table-column v-for="(item, index) in skuListLabel" :prop="item.prop" :label="item.label"
                        :key="index" align="center" />
                    <el-table-column prop="id" label="SkuID" align="center" />
                    <el-table-column prop="price" label="￥价格(元)" align="center" width="230px">
                        <template v-slot="{ row }">
                            <el-input-number v-model="row.price" :min="1" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="vipPrice" label="￥VIP价(元)" align="center" width="230px">
                        <template v-slot="{ row }">
                            <el-input-number v-model="row.vipPrice" :min="1" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="originalPrice" label="￥吊牌价(元)" align="center" width="230px">
                        <template v-slot="{ row }">
                            <el-input-number v-model="row.originalPrice" :min="1" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="stock" label="库存" align="center" width="230px">
                        <template v-slot="{ row }">
                            <el-input-number v-model="row.stock" :min="1" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="weight" label="重量" align="center" width="230px">
                        <template v-slot="{ row }">
                            <el-input-number v-model="row.weight" :min="1" />
                        </template>
                    </el-table-column>
                    <el-table-column label="sku图片" align="center" width="230px">
                        <template v-slot="scope">
                            <el-upload :show-file-list="false" action="/upload/admin"
                                :before-upload="handerbeforeAvatarUpload" :headers="headers"
                                :on-success="handleAvatarSuccess" :on-preview="handlePictureCardPreview"
                                :on-remove="handleRemove">
                                <img v-if="scope.row.img" width="50" height="50" :src="scope.row.img" class="avatar" />
                                <div v-else @click.capture="changeCurrentRow(scope.$index)">
                                    <el-button type="primary" :icon="Upload"></el-button>
                                </div>
                            </el-upload>
                        </template>
                    </el-table-column>
                    <el-table-column label="条形码" align="center" width="230px">
                        <template v-slot="{ row }">
                            <el-input v-model="row.barCode">
                                <template #prepend>
                                    <el-button @click="row.barCode = new Date().getTime()">随机
                                    </el-button>
                                </template>
                            </el-input>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>

        <!-- 弹出框表单模块 -->
        <el-dialog v-model="dialogVisible" v-if="dialogVisible" :title="title" width="30%">
            <el-form :rules="dialogRules" :model="dailogForm" label-width="110px" class="dialog-form"
                ref="ruleDialogFormRef" status-icon>
                <template v-if="title === '设置商品参数'">
                    <el-form-item label="商品参数名称">
                        <el-input v-model="dailogForm.productForm.attribute" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="商品参数值">
                        <el-input v-model="dailogForm.productForm.value" autocomplete="off" />
                    </el-form-item>
                </template>
                <template v-if="title === '添加规格维度' || title === '修改商品参数'">
                    <el-form-item label="商品参数名称" prop="title">
                        <el-input v-model="dailogForm.specificationForm.title" autocomplete="off"  @keypress.enter.prevent="handlerPushData" />
                    </el-form-item>
                </template>
                <template v-if="title === '批量定价'">
                    <el-form-item label="现价(￥)" prop="price">
                        <el-input-number v-model="dailogForm.pricingForm.price" :min="0" />
                    </el-form-item>
                    <el-form-item label="VIP价格(￥)" prop="vipPrice">
                        <el-input-number v-model="dailogForm.pricingForm.vipPrice" :min="0" />
                    </el-form-item>
                    <el-form-item label="吊牌价(￥)" prop="originalPrice">
                        <el-input-number v-model="dailogForm.pricingForm.originalPrice" :min="0" />
                    </el-form-item>
                </template>
                <template v-if="title === '提示'">
                    <div>
                        是否要回去！
                    </div>
                </template>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button v-if="title=='提示'" @click="router.back('commoditylist')">返回</el-button>
                    <el-button v-else @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handlerPushData">确定</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 底部提交按钮 -->
        <div class="bottom-wrap">
            <el-button type="primary" @click="handleclose">关闭</el-button>
            <el-button type="primary" @click="submitForm(ruleFormRef)">保存商品</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref, nextTick } from 'vue'
import { ElMessage, ElInput, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps, CascaderOption, FormInstance, UploadFile } from 'element-plus'
import type { TypeSpeciFication, TypeLabel, TypeSkuTable } from "#/index";
import { ClassCreateProduct } from "#/index";
import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'
import jsCookie from "js-cookie";
import { Upload } from '@element-plus/icons-vue'
import { post } from '@/utils/request';
import router from '@/router';
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
const route = useRoute()

//导航守卫
onBeforeRouteUpdate((to) => {
    console.log(to);

    if (!hasCached) {
        handleinitialization(to.params.id as string)
    }
})
let hasCached = route.meta.keepAlive || false

const ruleFormRef = ref<FormInstance>()
const ruleDialogFormRef = ref<FormInstance>()

const imageUrl = ref('')

const headers = ref({
    AdminToken: jsCookie.get('token')
})


interface SpanMethodProps {
    row: number
    column: TableColumnCtx<TypeSkuTable>
    rowIndex: number
    columnIndex: number
}

//表单验证
const rules = {
    originalPrice: [{ required: true, message: '请输入原始价格', trigger: 'blur' }],
    title: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
    vipPrice: [{ required: true, message: '请输入VIP价格', trigger: 'blur' }],
    price: [{ required: true, message: '请输入当前价格', trigger: 'blur' }],
    imgList: [{ required: true, message: '请上传图片', trigger: 'blur' }],
    stock: [{ required: true, message: '请输入库存', trigger: 'blur' }],
    description: [{ required: true, message: '请输入商品简介', trigger: 'blur' }],
    freightTemplateId: [{ required: true, message: '请选择运费模板', trigger: 'change' }],
    categoryId: [{ required: true, message: '请选择所属类目', trigger: 'change' }]
}

//弹出框表单验证
const dialogRules = {
    // attribute: [{ required: true, message: '请输入参数名称', trigger: 'blur' }],
    // value: [{ required: true, message: '请输入参数值', trigger: 'blur' }],
    // title: [{ required: true, message: '请输入类型名称', trigger: 'blur' }],
    // price: [{ required: true, message: '请输入现价', trigger: 'blur' }],
    // vipPrice: [{ required: true, message: '请输入VIP价', trigger: 'blur' }],
    // originalPrice: [{ required: true, message: '请输入吊牌价', trigger: 'blur' }]
}

//对话框显示隐藏
const dialogVisible = ref(false)

//对话框标题
const title = ref('')

//创建商品
const ruleForm = reactive(new ClassCreateProduct())

//运费数据
const freight: CascaderOption[] = reactive([])

//类目数据
const category: CascaderOption[] = reactive([])

// 运费Cascader 级联选择器配置
const freightProps = {
    value: 'id',//指定选项的值为选项对象的某个属性值
    label: 'title',//指定选项标签为选项对象的某个属性值
    children: 'carriageDOList',//指定选项的子选项为选项对象的某个属性值
    checkStrictly: true,//是否严格的遵守父子节点不互相关联
    emitPath: false
}

interface tadraw {
    img: string | undefined
    imgVisible: boolean
    specificationForm: object
    pricingForm: object
    productForm: object
}

//弹出框数据
let dailogForm: any = reactive({
    img: undefined,
    imgVisible: false,
    //弹出框添加规格维度数据
    specificationForm: {
        title: '',//规格名称
        gmtCreate: 0,//创建时间
        gmtUpdate: 0,//结束时间
        values: [],//tag标签内容
        inputVisible: false,//控制输入框显示隐藏
        inputValue: ""//tag输入框的值
    },
    //弹出框批量定价数据
    pricingForm: {
        price: 0,//现价
        vipPrice: 0,//vip价格
        originalPrice: 0//原价
    },
    //弹出框设置商品参数数据
    productForm: {
        attribute: '', //商品参数
        value: ''//商品参数值
    }
})

//用于创建sku商品的label
let skuListLabel: TypeLabel[] = reactive([])

// 类目Cascader 级联选择器配置
const categoryProps = {
    value: 'id',//指定选项的值为选项对象的某个属性值
    label: 'title',//指定选项标签为选项对象的某个属性值
    children: 'childrenList',//指定选项的子选项为选项对象的某个属性值
    checkStrictly: true,//是否严格的遵守父子节点不互相关联
    emitPath: false
}

//tag input的ref属性
let InputRef = ref<InstanceType<typeof ElInput>>()

let current = ref(0)
let spuid = ref('')

//挂载后请求数据
onMounted(() => {
    //运费
    handlerGetFreightList()
    //类目
    handlerGetCategoryList()
    if (route.params.id) {
        spuid.value = route.params.id as string
        handleinitialization(spuid.value)
    }
})

//初始化
const handleinitialization = (rowid: string | undefined) => {
    let id = rowid ? rowid : route.params.id
    let data = {
        _gp: 'admin.product',
        _mt: 'detail',
        spuId: id
    }
    post(data).then(res => {
        console.log(res);
        let { errno, errmsg } = res
        if (200 == errno) {
            let datas = JSON.parse(JSON.stringify(res.data))
            let { imgList, skuList, specificationList } = datas
            imgList.forEach((item: object, index: number) => {
                imgList[index] = { url: item }
            })
            let arr: string[][] = [];
            skuList.forEach((item: { specification: string }) => {
                arr.push(item.specification.split(","))
            })
            specificationList.forEach((item: object) => {
                item["values"] = [];
            })
            arr.forEach((item) => {
                item.forEach((items) => {
                    let arrs = items.split("_")
                    specificationList.forEach((value: { [x: string]: string[]; title:any; }) => {
                        if (value.title == arrs[0]) {
                            let index = value["values"].findIndex((v) => v == arrs[1]);
                            if (index == -1) {
                                value["values"].push(arrs[1])
                            }
                        }
                    })
                })
            })
            Object.assign(ruleForm, datas)
            tinymce.activeEditor.setContent(ruleForm.detail); //设置副文本内容
            ruleForm.skuList.forEach((item, index) => {
                Object.assign(item, res.data.skuList[index])
            })
        } else {
            ElMessage.error(errmsg)
        }
    })
}

/**
 * 获取运费模板
 */
const handlerGetFreightList = async () => {
    let data = {
        _gp: "admin.freight",
        _mt: "list"
    }
    post(data).then(res => {
        let { errmsg, errno } = res
        if (200 === errno) {
            freight.length = 0
            freight.push(...res.data)
        } else {
            ElMessage.error(errmsg)
        }
    })
}

/**
 * 获取类目
 */
const handlerGetCategoryList = async () => {
    let data = {
        _gp: "admin.category",
        _mt: "categoryTree"
    }
    post(data).then(res => {
        let { errmsg, errno } = res
        if (200 === errno) {
            category.length = 0
            category.push(...res.data)
        } else {
            ElMessage.error(errmsg)
        }
    })
}

/**
 * 图片上传成功回调
 * @param response
 * @param uploadFile
 */
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    if (ruleForm.imgList)
        if (200 == response.errno) {
            let url = response.url
            let uid = uploadFile.uid
            ruleForm.imgList.push({ url, uid })
            ruleForm.skuList[current.value].img = url
        }
}


const dialogImageUrl = ref('')
const dialogVisiblede = ref(false)

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
}
/**
 * 点击文件列表中已上传的文件时的钩子
 * @param uploadFile
 */
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!
    dialogVisible.value = true
}

/**
 * 图片上传之前的回调
 */
const handerbeforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!')
        return false
    }
    return true
}


const handlerAddBtn = (index: number, item: object) => {
    dialogVisible.value = true
    switch (index) {
        case 1:
            title.value = '设置商品参数'
            dailogForm.productForm.attribute = ''
            dailogForm.productForm.value = ''
            break;
        case 2:
            title.value = '添加规格维度'
            dailogForm.specificationForm.title = ''
            dailogForm.specificationForm.gmtCreate = new Date().getTime() //得到当前毫秒数
            dailogForm.specificationForm.gmtUpdate = new Date().getTime()
            break;
        case 3:
            title.value = '批量定价'

            break;
        case 4:
            title.value = '修改商品参数'
            Object.assign(dailogForm.specificationForm, item)
            break;
        case 5:
            title.value = '提示'
        default:
            break;
    }
}

/**
 * 弹出框确定按钮
 */
const handlerPushData = () => {

    if (title.value === '设置商品参数') {
        if (dailogForm.productForm.attribute == '' || dailogForm.productForm.value == '') {
            ElMessage.error('不能为空')
            return
        } else {
            let attributeList = JSON.parse(JSON.stringify(dailogForm.productForm))
            ruleForm.attributeList.push(attributeList)
        }
    } else if (title.value === '添加规格维度') {
        if (dailogForm.specificationForm.title == '') {
            ElMessage.error('参数不能为空')
            return
        } else {
            let specificationList = JSON.parse(JSON.stringify(dailogForm.specificationForm))
            ruleForm.specificationList.push(specificationList)
            handlerCreateSkuTable()//调用生成sku数据函数
        }
    } else if (title.value === '修改商品参数') { //修改参数如果商品规格数组中的创建时间等于弹出框商品规格中的创建时间久把title赋值映射
        ruleForm.specificationList.map((item) => {
            if (item.gmtCreate == dailogForm.specificationForm.gmtCreate) {
                item.title = dailogForm.specificationForm.title
                handlerCreateSkuTable()//调用生成sku数据函数
            }

        })
    } else if (title.value === '批量定价') {
        let { pricingForm } = dailogForm
        if (pricingForm.vipPrice < pricingForm.price && pricingForm.vipPrice < pricingForm.originalPrice && pricingForm.price < pricingForm.originalPrice) {
            ruleForm.skuList.forEach(item => {
                item.originalPrice = pricingForm.originalPrice
                item.vipPrice = pricingForm.vipPrice
                item.price = pricingForm.price
            })
        } else {
            ElMessage.warning('批量定价vip价格必须小于现价并且vip价格小于原价并且现价小于原价!')
            return
        }
    }
    dialogVisible.value = false
}

/**
 * 创建sku表格label
 */
const handlerCreateLabel = (titles: any) => {
    console.log(titles);
    skuListLabel.length = 0
    titles.forEach((item: string) => {
        skuListLabel.push({ prop: 'id_' + item, label: item })
    })
}

/**
 * 合并表格
 */
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }: SpanMethodProps) => {
    let specList = ruleForm.specificationList.filter(spec => spec.values.length > 0)
    if (columnIndex < specList.length - 1) {
        let rowSpanNum = 1
        for (let i = columnIndex + 1; i < specList.length; i++) {
            rowSpanNum *= specList[i].values.length
        }
        if (rowIndex % rowSpanNum === 0) {
            return { rowspan: rowSpanNum, colspan: 1 }
        } else {
            return { rowspan: 0, colspan: 0 }
        }
    }
}

/**
 * 生成sku数据
 */
const handlerCreateSkuTable = () => {
    const specList = ruleForm.specificationList
    if (specList.length < 1) { //规格数组没有数据清空label数组和sku数组
        skuListLabel.length = 0
        ruleForm.skuList = []
        return
    }
    let valueList = specList.filter(item => item.values.length).map(item => item.values)
    let titles = specList.map(item => item.title)

    handlerCreateLabel(titles)//创建sku表格label

    // 使用笛卡尔积算法将数据进行交叉处理
    let arr = valueList.reduce((total, curr) => {
        let temp: string[][] = []
        total.forEach((item: any[]) => {
            curr.forEach((node: any) => {
                temp.push(item.concat([node]))
            })
        })
        return temp
    }, [[]])

    let skudata: { title: string; originalPrice: number; price: number; vipPrice: number; stock: number; weight: number; barCode: string; img: string }[] = []
    // 根据算好的数据生成表格数据
    arr.forEach((item: string[]) => {
        let obj = {
            specification: ''
        }    // 'id_xxx'
        let title: any[] = []  // title
        // 生成title以及表格所绑定的信息
        titles.forEach((node, index) => {
            if (item[index]) {
                obj['id_' + node] = item[index]
                title.push(item[index])
            }
        })
        // 填充规格数据'xxx_xxx'
        obj.specification = titles.map((m, v) => {
            if (m[v]) return m + '_' + item[v]
        }).toString()
        // 将数据加入到ruleForm中
        skudata.push({
            title: title.toString(),
            originalPrice: 0,
            price: 0,
            vipPrice: 0,
            stock: 0,
            weight: 0,
            barCode: '',
            img: '',
            ...obj
        })
    })
    ruleForm.skuList = skudata.map((m, v) => {//合并数据
        return Object.assign(m, ruleForm.skuList[v])
    })
}


/**
 * 保存
 */
const handlerPushData2 = () => {
    // 创建
    // let dataes = JSON.parse(JSON.stringify(ruleForm))
    // dataes.imgList = dataes.imgList.map((item: { response: { url: any; }; }) => item.response.url);
    // dataes.img = dataes.imgList[0];
    //编辑
    let datalist = JSON.parse(JSON.stringify(ruleForm))
    datalist.imgList = datalist.imgList.map((item: { response: { url: any; }; url: any; }) => {
        if (item?.response) {
            return item.response.url
        } else {
            return item.url
        }
    });
    datalist.img = datalist.imgList[0];
    let data = {
        _gp: 'admin.product',
        _mt: spuid.value ? 'edit' : 'create',
        spuDTO:JSON.stringify(datalist)
    }
    post(data).then(res => {
        console.log(res);
        let { errno, errmsg } = res
        if (200 == errno) {
            handlerAddBtn(5, {})
            ElMessage.success(spuid.value ? "修改成功" : '创建成功')
        } else {
            ElMessage.error(errmsg)
        }
    })
}





const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            handlerPushData2()
        } else {
            console.log('error submit!')
            return false
        }
    })
}

/**
 * 通过事件捕获拿到当前下标
 * @param index 下标
 */
const changeCurrentRow = (index: number) => {
    current.value = index
}


/**
 * 关闭tag标签
 * @param item ruleForm.specificationList 规格数组
 * @param value  规格数组中的tag内容数组valus
 */
const handlerClose = (item: TypeSpeciFication, value: string) => {
    item.values.splice(item.values.indexOf(value), 1)
}

/**
 * 添加按钮tag标签切换成文本框获取光标
 * inputVisible 控制input显示隐藏
 * @param item ruleForm.specificationList 数组中的每一个
 */
const handlerShowInput = (item: TypeSpeciFication) => {
    item.inputVisible = true
    nextTick(() => {
        // InputRef.value!.input!.focus()
    })
}

/**
 * tag-input 显示
 * @param item.values tag标签内容[数组]
 * @param item.inputValue 文本框的值
 * @param item.inputVisible 文本框显示隐藏属性
 * @param item ruleForm.specificationList 规格数组中的每一个
 */
const handleInputConfirm = (item: TypeSpeciFication) => {
    let inputValue = item.inputValue
    if (inputValue) {
        item.values.push(inputValue)
    }
    handlerCreateSkuTable()//调用生成sku数据函数
    item.inputVisible = false
    item.inputValue = ''
}

/**
 * 关闭添加页面
 */
function handleclose() {
    ElMessageBox.confirm(
        '是否要关闭商品添加页面?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage.success("关闭成功");
            router.go(-1)
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })
}
</script>

<style lang="less" scoped>
.box-card {
    width: 100%;

    avatar-uploader .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    .button-new-tag {
        margin-left: 10px;
    }

    .el-tag {
        margin: 0 5px;
    }

    .ml-1 {
        width: 6%;
    }
}

.dialog-form {
    width: 90%;
    margin: 0 auto;
}

.bottom-wrap {
    text-align: right;
    margin: 15px 0 20px 0;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>
